import React from 'react';
import { Input, Collapse, message, Button } from 'antd';
import ReactMarkdown from 'react-markdown';
import remarkBreaks from 'remark-breaks';
import remarkGfm from 'remark-gfm';
import styles from "./TextChatDialog.less";

const { Panel } = Collapse;
const { TextArea } = Input;

const TextChatArea = (props) => {

    const {
        formRef, themeColor, loading, textChatMessages, focusBlurFlag, completeStatus, pageSource, focusBlurTextArea, onSendChat
    } = props;

    const sendChat = () => {
        formRef.current.validateFields().then(values => {
            let domInput = document.getElementById("textChatInput");
            if (!domInput.value) {
                message.error('请输入话题');
                return;
            }

            values["source"] = pageSource;
            onSendChat(values, domInput.value);
        }).catch(error => {
            const errors = error.errorFields;
            for (let i = 0; i < errors.length; i++) {
                console.log("TextChatDialog Error => " + errors[i].name[0] + " ===>>> " + errors[i].errors[0]);
            }
        });
    }

    return (
        <div style={{ width: "100%", height: "100%", display: "flex", flexDirection: "column" }}>
            <div style={{ flex: 5, overflow: "auto", padding: "0px 0px 15px 0px" }}>
                {
                    textChatMessages.map(item =>
                        <div style={{ padding: "15px 20px 0px 20px", textAlign: item.type == "user" ? "right" : "left", display: "flex", flexDirection: "row" }}>
                            <span style={{ flex: item.type == "user" ? 1 : 0 }}>
                                <i className={"ri-robot-3-line"} style={{ display: item.type == "ai" ? "inline-block" : "none", fontSize: 20, padding: "0px 15px 0px 0px" }} />
                            </span>
                            <span style={{ display: "flex", flexDirection: "column" }}>
                                <Collapse bordered={false} style={{ background: "#ffffff", display: item.think ? "block" : "none" }}>
                                    <Panel header={"思考过程"} key={"think"}>
                                        <ReactMarkdown remarkPlugins={[remarkBreaks, remarkGfm]}>{item.think}</ReactMarkdown>
                                    </Panel>
                                </Collapse>
                                <span className={styles.text_chat_message_item} style={{ background: "user" == item.type ? "#9e9e9e1a" : null }}>
                                    <ReactMarkdown remarkPlugins={[remarkBreaks, remarkGfm]}>{item.content}</ReactMarkdown>
                                </span>
                            </span>
                            <span style={{ flex: item.type == "user" ? 0 : 1 }}>
                                <i className={"ri-user-3-line"} style={{ display: item.type == "user" ? "inline-block" : "none", fontSize: 20, padding: "0px 0px 0px 15px" }} />
                            </span>
                        </div>
                    )
                }
            </div>
            <div style={{ display: "flex", flexDirection: "column", border: focusBlurFlag ? "1.5px solid blue" : "1.5px solid #d9d9d9", borderRadius: "8px" }} className={styles.text_chat_textarea}>
                <TextArea allowClear
                          id={"textChatInput"}
                          placeholder="让TaiXu智能为你答疑解惑。。。"
                          onFocus={() => focusBlurTextArea("focus")}
                          onBlur={() => focusBlurTextArea("blur")}
                          style={{ minHeight: "80px", maxHeight: "100px", resize: 'none' }}
                />
                <div style={{ display: "flex", flexDirection: "row", padding: "20px 20px 20px 20px", background: "#ffffff", borderRadius: "10px" }}>
                    <div style={{ flex: 3, display: "flex", flexDirection: "row" }}>
                        <div className={styles.text_chat_button}>
                            <Button type="dashed">
                                <i className={completeStatus != "finish" ? "ri-atom-line" : "ri-atom-fill"} style={{ fontSize: 20 }}></i>深度思考
                            </Button>
                        </div>
                        <div className={styles.text_chat_button} style={{ paddingLeft: 20 }}>
                            <Button type="dashed">
                                <i className={completeStatus != "finish" ? "ri-color-filter-ai-line" : "ri-color-filter-ai-fill"} style={{ fontSize: 20 }}></i>分析研究
                            </Button>
                        </div>
                    </div>
                    <div style={{ display: "flex", flexDirection: "row", textAlign: "right" }}>
                        <div className={styles.text_chat_button}>
                            <Button type="dashed">
                                <i className={completeStatus != "finish" ? "ri-global-line" : "ri-global-fill"} style={{ fontSize: 20 }}></i>网络搜索
                            </Button>
                        </div>
                        <div style={{ paddingLeft: 20 }} className={styles.text_chat_button} onClick={() => sendChat()}>
                            <Button loading={loading} disabled={loading} style={{ background: themeColor }}>
                                <i className={completeStatus != "finish" ? "ri-chat-smile-2-line" : "ri-chat-smile-2-fill"} style={{ fontSize: 20 }}></i>智能答疑
                            </Button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default TextChatArea;
